<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>备忘录</title>
  <link rel="stylesheet" href="style3.css"> <!-- 引入外部CSS文件 -->
</head>

<body>
  <div id="memo-container">
    <textarea id="memo-input" placeholder="在此输入备忘录内容"></textarea>
    <button onclick="addMemo()">添加备忘录</button>
    <ul id="memo-list">
    </ul>
  </div>

  <script>
    function addMemo() {
      var memoText = document.getElementById('memo-input').value;
      if (memoText.trim()!= '') {
        var list = document.getElementById('memo-list');
        var li = document.createElement('li');
        li.innerHTML = memoText + '<button class="close-btn" onclick="deleteMemo(this)">删除</button>';
        list.appendChild(li);
        document.getElementById('memo-input').value = '';
      }
    }

    function deleteMemo(btn) {
      var li = btn.parentElement;
      var list = document.getElementById('memo-list');
      list.removeChild(li);
    }
  </script>
</body>

</html>